import styles from "./css/Home.module.css";
import { useEffect, useState } from "react";
import { dishList, likeDish, collectDish } from "./service";
import { SearchOutline, MoreOutline, CloseOutline } from 'antd-mobile-icons'
import { useNavigate } from "react-router-dom";
import { NavBar } from "antd-mobile";
import { ProductCard, Tag, Button, Tabs, List, PullRefresh } from 'react-vant';
import Card from "./Card";
import Reco from "./Reco";
import Collects from "./Collects";
import Hot from "./Hot";


export default function () {
  const navigate = useNavigate();
  const items = [
    {
      name: "推荐",
      com: <Reco />,
    },
    {
      name: "收藏",
      com: <Collects />,
    }
  ]
  return (
    <div>
      <NavBar
        onBack={() => { navigate(-1) }}
        right={<SearchOutline fontSize={24} onClick={() => navigate("search")} />}
        style={{
          marginBottom: "12px",
        }}>厨房助手</NavBar>
      <Tabs defaultActive={0}>
        {items.map((item) => (
          <Tabs.TabPane key={item.name} title={item.name}>
            <div style={{
              marginTop: "12px",
            }}>
              {item.com}
            </div>
          </Tabs.TabPane>
        ))}
      </Tabs>
    </div>
  )
}